<template>
  <div>
    {{ count }} <br />
    {{ $store.getters.str }} <br />
    {{ $store.getters.arr }} <br />
    {{ $store.state.user.name }} <br />
    <button @click="add">加</button> <br />
    <button @click="out">延迟</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    ...mapMutations(["add"]),
    ...mapActions(["out"]),
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: all 1s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: all 1s;
}
.fade-leave-to {
  opacity: 0;
}
</style>